<template>
	<view style="display: flex;align-items: center;flex-direction: column;">
		<view class="headerContainer">
			<view class="wrapper">
				<view class="left">
					<image :src="customerInfo.avatar" class="avatar" mode=""></image>
					<view class="tag" @click="onChangeIntent" v-if="!isChannel">
						{{intentionList[customerInfo.intention]}}
						<image class="icon" src="../static/image/icon_visitor_arrow_l.png" mode=""></image>
					</view>
					<u-picker :show="isShowIntent" :defaultIndex="[Number(customerInfo.intention)]" @close="isShowIntent=false"
						@cancel="isShowIntent=false" @confirm="onPickerConfirm" itemHeight="88"
						:columns="[intentionList]"></u-picker>
				</view>
				<view class="middle">

					<view class="name">
						<input @click="updateCustomerName(0)" :maxlength="'12'" :disabled="isChannel||!isEditName"
							:focus="isEditName" placeholder="请输入备注,最长12字" class="input" type="text"
							v-model="customerInfo.name" />
						<template v-if="!isChannel">
							<view style="display: flex;align-items: center;" v-if="isEditName==false"
								@click="updateCustomerName(0)">
								<image src="../static/image/icon_card_edit.png" class="icon" mode=""></image>

							</view>
							<view style="display: flex;align-items: center;" v-else @click="updateCustomerName(1)">
								<image src="../static/image/icon_card_gou.png" class="icon" mode=""></image>
								<!-- <text style="color: #32b0ff;">保存</text> -->
							</view>
						</template>

					</view>
					<view v-if="customerInfo.nickname&&customerInfo.nickname.length>0"
						class="nickName text-1line-ellipsis">
						昵称: {{customerInfo.nickname||'...'}}
					</view>

					<view v-if="customerInfo.phone&&customerInfo.phone.length>0" class="phone" @click="onCopyPhone">
						手机号: {{customerInfo.phone||'...'}}
						<image class="icon" src="../static/image/icon_card_copy.png" mode=""></image>
					</view>
				</view>
			</view>

			<view class="bntWrapper">
				<view v-if="customerInfo.phone&&customerInfo.phone.length>0" class="leftBtn" @click="gotoPhone">
					<image class="icon" src="../static/image/icon_visitor_tel.png" mode=""></image>
					打电话
				</view>

			</view>

		</view>

		<view class="tabsHeaderContianer">
			<u-tabs :list="listUtabs" active-color="#16a5fe" :lineHeight="'6rpx'" :lineWidth="'60rpx'"
				inactive-color="#606266" font-size="30" gutter="30" :current="currentUtabs" @change="onChangeUtabs">
			</u-tabs>
		</view>

		<!-- 动态 -->
		<view v-if="listUtabs[currentUtabs].id==0" class="tabsContianer">
			<u-empty v-if="customerLogPageObj.list.length==0" style="padding-top: 300rpx" text="暂无记录"
				:width="'400rpx'"
				icon="/static/image/icon_empty_list.png"
				textSize="28rpx"
				mode="data"></u-empty>
			<template v-for="(item,index) in customerLogPageObj.list">
				<view class="customerLogDay" :key="index"
					v-if="(index==0)||(customerLogPageObj.list[index].day!=customerLogPageObj.list[index-1].day)">
					{{customerLogPageObj.list[index].day}}
				</view>
				<view class="customerLogItem">
					<view class="wrapper">
						<view class="time">
							{{customerLogPageObj.list[index].time}}
						</view>
						<view class="content">
							{{customerLogPageObj.list[index].content||"无内容"}}
						</view>
					</view>

					<view class="staytime">
						{{customerLogPageObj.list[index].stayTime}}
					</view>
				</view>
				<view
					v-if="customerLogPageObj.list[index].sharePathList&&customerLogPageObj.list[index].sharePathList.length>0"
					class="customerLogAvatar" @click="onShowSharePath(customerLogPageObj.list[index].sharePathList)">
					<view class="left">
						<template v-for="(item1,index1) in customerLogPageObj.list[index].sharePathList">
							<image class="avatar" :src="item1.avatar" mode="" :key="index1"></image>
							<image v-if="(index1+1)!=customerLogPageObj.list[index].sharePathList.length" class="arrow"
								src="../static/image/jiantou.png" mode=""></image>
						</template>
					</view>
					<image class="right" src="../static/image/btn_back.png" mode=""></image>
				</view>
			</template>
		</view>
		<!-- 跟进记录 -->
		<template v-if="listUtabs[currentUtabs].id==1">
			<view v-for="(item,index) in followLogPageObj.list" class="tabsContianer"
				:class="{secondTabsContianer:(index>0)}" :key="index">
				<view class="followLogContainer" :key="index">
					<image class="tag" src="../static/image/icon_lajitong.png" @click="onDeleteFollowLog(item)" mode="">
					</image>
					<view class="day">
						{{followLogPageObj.list[index].day}} {{followLogPageObj.list[index].time}}
					</view>

					<view class="content">
						<span class="type">
							{{followLogPageObj.list[index].type==null?'':(followLogPageObj.list[index].type+"|")}}
						</span>
						{{followLogPageObj.list[index].content}}
					</view>
					<view class="bottomWrapper">
						<image :key="index1" v-for="(item1,index1) in followLogPageObj.list[index].images" class="img"
							:src="item1.filePath" mode=""
							@click="onPreviewImages(followLogPageObj.list[index].images, index1)"></image>
					</view>
				</view>
			</view>
			<view v-if="followLogPageObj.list.length==0" 
				style="padding-top: 40rpx;color: #666;font-size: 24rpx;"
				class="tabsContianer secondTabsContianer">
				暂无跟进记录
			</view>
			<!-- 跟进记录 -->
			<view style="position: fixed;left: 0;bottom: 0;width: 750rpx;background-color: #FFFFFF;">
				<view style="width: 750rpx;height: 1px;background-color: #F3F3F3;">
			
				</view>
			
				<view class="bottomContainer">
					<view class="container" @click="gotoAddFollowLog">
						添加跟进记录
					</view>
				</view>
			</view>
		</template>
		<!-- 客户分析 -->
		<template v-if="listUtabs[currentUtabs].id==2">
			<view class="tabsContianer">
				<view class="analysisContainer">
					<view class="item">
						<view class="left">
							首次访问内容
						</view>
						<view class="right">
							{{analysisDataObj.firstVisitContent||""}}
						</view>
					</view>
					<view class="item">
						<view class="left">
							首次访问时间
						</view>
						<view class="right">
							{{analysisDataObj.firstVisitTime}}
						</view>
					</view>
					<view class="item">
						<view class="left">
							最后访问时间
						</view>
						<view class="right">
							{{analysisDataObj.lastVisitTime}}
						</view>
					</view>
					<view class="item">
						<view class="left">
							活跃时段
						</view>
						<view class="right">
							<text v-for="(item,index) in analysisDataObj.activePeriods" :key="index">
								{{item.keyName+'点'+(index!=(analysisDataObj.activePeriods.length-1)?',':'')}}
							</text>

						</view>
					</view>
					<view class="item">
						<view class="left">
							分享次数
						</view>
						<view class="right">
							{{analysisDataObj.shareTimes}}
						</view>
					</view>
				</view>
			</view>
			<view class="rankListContainer">
				<u-tabs :list="customerlistUtabs" active-color="#16a5fe" :lineHeight="'6rpx'" :lineWidth="'60rpx'"
					inactive-color="#606266" font-size="26" gutter="30" :current="currrentCustomerTabs"
					@change="onChangeCustomerTabs">
				</u-tabs>
				<template v-if="currrentCustomerTabs == 0">
					<view class="tableBox" style="margin-top: 20rpx;">
						<view class="item">
							<view class="left">
								排名
							</view>
							<view class="middle">
								重要页面
							</view>
							<view class="right">
								次数
							</view>
						</view>

						<view class="item" :key="index" v-for="(item,index) in analysisDataObj.visitCountRanking">
							<view class="left">
								{{index+1}}
							</view>
							<view class="middle text-1line-ellipsis">
								{{logTypeMap[item.keyName]||item.keyName||''}}
							</view>
							<view class="right">
								{{item.value}}
							</view>
						</view>

						<view class="endLine">

						</view>
					</view>
				</template>
				<template v-if="currrentCustomerTabs == 1">
					<view class="tableBox" style="margin-top: 20rpx;">
						<view class="item">
							<view class="left">
								排名
							</view>
							<view class="middle">
								重要页面
							</view>
							<view class="right">
								时长(秒)
							</view>
						</view>

						<view class="item" :key="index" v-for="(item,index) in analysisDataObj.visitCountRanking">
							<view class="left">
								{{index+1}}
							</view>
							<view class="middle text-1line-ellipsis">
								{{logTypeMap[item.keyName]||item.keyName||''}}
							</view>
							<view class="right">
								{{item.staySeconds}}
							</view>
						</view>

						<view class="endLine">

						</view>
					</view>
				</template>

			</view>
		</template>
			<!-- 客户资料 -->
		<template v-if="listUtabs[currentUtabs].id==3">
			<view class="tabsContianer">
				<view class="userFlagContainer">
					<view v-for="(item,index) in userFlagList" v-if="item.show" :key="index" class="item"
						@click="onPopupProps(index)">
						<view class="left">
							{{ item.name }}
						</view>
						<input v-if="item.type=='input'" class="middle" type="text" v-model="item.text"
							:placeholder="'请输入'+item.name" />
						<view v-else class="middle">
							{{ item.text }}
						</view>
						<image v-if="item.type!='input'" class="right" src="../static/image/btn_back22.png" mode="">
						</image>
					</view>
				</view>

				<u-popup :show="isShowPopupChexkBox" @close="isShowPopupChexkBox=false" mode="center" :closeable="true"
					round="20">
					<view class="userInfoPopup">
						<view class="text">
							{{userFlagList[curIndex].name}}
						</view>
						<u-checkbox-group v-model="selectCheckBoxList" @change="" placement="column">
							<u-checkbox v-model="item.checked" v-for="(item, index) in curChexkBoxList" :key="index"
								:labelSize="'30rpx'" :iconSize="'35rpx'" :size="'35rpx'" :label="item.title"
								:name="item.title" style="margin-bottom: 30rpx;">
								{{item.title}}
							</u-checkbox>
						</u-checkbox-group>
						<view class="bottom">
							<view class="left" @click="onCancleCheckBox">
								取消
							</view>
							<view class="right" @click="onConfirmCheckBox">
								确定
							</view>
						</view>
					</view>
				</u-popup>

				<u-picker :defaultIndex="[Number(curPickerIndex)]" :show="isShowPopupPicker" @close="isShowPopupPicker=false"
					itemHeight="88"
					@cancel="isShowPopupPicker=false" @confirm="onPickerPropConfirm" :columns="[curPickerList]">
				</u-picker>

				<view style="position: fixed;left: 0;bottom: 0;width: 750rpx;background-color: #FFFFFF;">
					<view style="width: 750rpx;height: 1px;background-color: #F3F3F3;">

					</view>

					<view class="bottomContainer">
						<view class="container" @click="onSaveCustomInfo">
							保存
						</view>
					</view>
				</view>


			</view>
		</template>

		<template  v-if="listUtabs[currentUtabs].id==4">
			<calculatorList ref="calculatorList" :id="customerId">
				
			</calculatorList>
		</template>
		
		<view class="" style="height: 200rpx;">

		</view>


		<u-popup :show="showBottomPopup" @close="showBottomPopup=false" mode="bottom" :closeable="true" round="40">
			<view class="popupContainer">
				<view class="" style="height: 100rpx;">

				</view>
				<view v-for="(item,index) in sharePathList" :key="index">
					<view class="wrapper">
						<image class="icon" :src="item.avatar" mode=""></image>
						<view class="name">
							{{item.nickname||"..."}}
						</view>
						<view class="right">
							{{item.createTime}}
						</view>
					</view>
					<image v-if="(index+1)!=sharePathList.length" class="arrow" src="../static/image/jiantou2.png"
						mode=""></image>
				</view>
				<view class="" style="height: 50rpx;">

				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const App = getApp();
	const api = require("@/static/js/api.js")
	const utils = require("@/static/js/utils.js")
	import calculatorList from "@/components/calculatorList/index.vue"
	
	let that = null
	export default {
		data() {
			return {
				customerId:"",
				//===顶部tab==========================================
				listUtabs: [{
					id: 0,
					name: ' 动态 '
				}, {
					id: 1,
					name: '跟进记录'
				}, {
					id: 2,
					name: '客户分析'
				}, {
					id: 3,
					name: '客户资料'
				}, {
					id: 4,
					name: '算贷记录'
				}],
				currentUtabs: 0,
				//=====客户分析 tab
				customerlistUtabs: [{
					name: ' 访问次数 '
				}, {
					name: '停留时长'
				}, ],
				currrentCustomerTabs: 0,
				//===顶部tab end======================================
				customerLogPageObj: {
					list: [],
					loadStatus: "loading",
					pageIndex: 1,
					curPageIndex: 0,
				},

				followLogPageObj: {
					list: [],
					loadStatus: "loading",
					pageIndex: 1,
					curPageIndex: 0,
				},


				customerInfo: {
					avatar: "",
					intention: 0,
					nickname: '',
					phone: "",
				},
				intentionList: [
					'未知意向',
					'低意向',
					'中意向',
					'高意向',
					'必买',
					'已购买',
					'无意向'
				],

				isShowIntent: false,
				isEditName: false,
				analysisDataObj: {
					firstVisitTime: "",
					lastVisitTime: '',
					shareTimes: '',
					activePeriods: [],
					visitCountRanking: [],
				},
				analysisSelect: 0,

				showBottomPopup: false,
				sharePathList: [],


				logTypeMap: {
					"card": "名片",
					"activity": "活动",
					"panorama": "全景图",
					"product": "楼盘资料",
					"note": "导购笔记",
					"article": "文章",
					"house_type": "户型",
					"poster": "海报",
					"periphery": "周边配套",
					"album": "相册",
					"home": "主页",
					"track": "轨迹",
					"video": "视频",
					"news": "楼盘动态",
					"promoteCode": "推广码"
				},

				userFlagList: [{
						name: '居住区域',
						key: 'livingArea',
						type: 'input',
						show: false,
						text: '',
					},
					{
						name: '工作性质',
						key: 'workNature',
						type: 'input',
						show: false,
						text: ''
					},
					{
						name: '工作区域',
						key: 'workArea',
						show: false,
						type: 'input',
						text: ''
					},
					{
						name: '客户登记',
						key: 'visitorStatus',
						type: 'picker',
						show: false,
						text: '',
						list: [],
						pickerList: [],
					},
					{
						name: '年龄阶段',
						key: 'ageGroup',
						type: 'picker',
						show: false,
						text: '',
						list: [],
						pickerList: [],
					},
					{
						name: '认知途径',
						key: 'knowWay',
						type: 'checkbox',
						show: false,
						text: '',
						list: [],
						pickerList: [],
					},
					{
						name: '关注重点',
						key: 'focusPoint',
						type: 'checkbox',
						show: false,
						text: '',
						list: [],
						pickerList: [],
					},
					{
						name: '客户抗性',
						key: 'resistPoint',
						type: 'checkbox',
						show: false,
						text: '',
						list: [],
						pickerList: [],
					},
					{
						name: '意向面积',
						key: 'intentionArea',
						type: 'picker',
						show: false,
						text: '',
						list: [],
						pickerList: [],
					},
					{
						name: '意向产品',
						key: 'intentionProduct',
						type: 'picker',
						show: false,
						text: '',
						list: [],
						pickerList: [],
					},
					{
						name: '意向楼层',
						key: 'intentionFloor',
						type: 'picker',
						show: false,
						text: '',
						list: [],
						pickerList: [],
					},
					{
						name: '心理价位',
						key: 'intentionPrice',
						type: 'picker',
						show: false,
						text: '',
						list: [],
						pickerList: [],
					},
					{
						name: '购买意向',
						key: 'intentionBuy',
						type: 'picker',
						show: false,
						text: '',
						list: [],
						pickerList: [],
					},
					{
						name: '用途',
						key: 'use',
						type: 'picker',
						show: false,
						text: '',
						list: [],
						pickerList: [],
					},
					{
						name: '家庭结构',
						key: 'familyPerson',
						type: 'picker',
						show: false,
						text: '',
						list: [],
						pickerList: [],
					},
				],
				curChexkBoxList: [],
				selectCheckBoxList: [],

				curPickerList: [],
				curPickerIndex: 0,
				isShowPopupChexkBox: false,
				isShowPopupPicker: false,
				curIndex: 6,
			};
		},
		components: {
			calculatorList
		},
		onLoad(options) {
			that = this
			that.customerId = options.id
			that.initTabs();

			that.getCustomerDetail();

		},
		onShow() {
			that.clearListShow(that.customerLogPageObj)
			that.clearListShow(that.followLogPageObj)
			if (this.listUtabs[this.currentUtabs].id == 0) {
				that.getOneCustomerLogList();
			} else if (this.listUtabs[this.currentUtabs].id == 1) {
				that.getFollowLogList();
			} else if (this.listUtabs[this.currentUtabs].id == 2) {
				that.getCustomerAnalysisData();
			} else if (this.listUtabs[this.currentUtabs].id == 3) {
				that.getUserProps();
			}
		},
		onUnload() {

		},
		onHide() {

		},
		onReachBottom() {
			if (this.listUtabs[this.currentUtabs].id == 0) {
				that.getOneCustomerLogList();
			}
			if (this.listUtabs[this.currentUtabs].id == 4) {
				that.$refs.calculatorList.getRecorldList()
			}
		},
		methods: {
			initTabs() {
				if (that.isChannel) {
					that.listUtabs.splice(0, that.listUtabs.length);
					that.listUtabs.push({
						id: 0,
						name: ' 动态 '
					})

					that.listUtabs.push({
						id: 2,
						name: '客户分析'
					})
				}
			},


			onCopyPhone() {
				uni.setClipboardData({
					data: this.customerInfo.phone,
					success: function() {
						uni.showToast({
							title: '手机号复制成功！'
						})
					}
				})
			},
			onPopupProps(index) {
				const type = that.userFlagList[index].type;
				console.log("onPopupProps", type)
				if (type === 'checkbox') {
					that.curIndex = index;
					var list = that.userFlagList[index].list;
					that.curChexkBoxList.splice(0, that.curChexkBoxList.length)
					that.selectCheckBoxList.splice(0, that.selectCheckBoxList.length)
					for (var i in list) {
						var obj = {
							code: list[i].code,
							title: list[i].title,
							checked: list[i].checked,
						}
						that.curChexkBoxList.push(obj);
						if (obj.checked) {
							that.selectCheckBoxList.push(obj.title)
						}
					}
					// console.log(that.curChexkBoxList,list)
					that.isShowPopupChexkBox = true;
				} else if (type === 'picker') {
					that.curIndex = index;
					var list = that.userFlagList[index].list;
					that.curPickerList.splice(0, that.curPickerList.length)

					var pushFlag = false
					for (var i in list) {
						if (list[i].checked) {
							that.curPickerIndex = i;
						}
						that.curPickerList.push(list[i].title);
					}
					that.isShowPopupPicker = true;
				}
			},
			onPickerPropConfirm(e) {
				console.log("onPickerPropConfirm", e)
				let userFlag = that.userFlagList[that.curIndex];
				var index = e.indexs[0];
				this.curPickerIndex = index
				userFlag.text = userFlag.list[index].title;
				for (var i = 0; i < userFlag.list.length; i++) {
					userFlag.list[i].checked = false;
				}
				userFlag.list[index].checked = true;

				this.isShowPopupPicker = false
			},
			onCancleCheckBox() {
				that.isShowPopupChexkBox = false;
			},
			onConfirmCheckBox() {
				let userFlag = that.userFlagList[that.curIndex]
				userFlag.text = ''

				for (var i in that.curChexkBoxList) {
					var item = that.curChexkBoxList[i]
					var index = that.selectCheckBoxList.findIndex(t => {
						return (t == item.title)
					})
					if (index >= 0) {
						item.checked = true
					} else {
						item.checked = false
					}
				}


				for (var i in that.curChexkBoxList) {
					userFlag.list[i].checked = that.curChexkBoxList[i].checked
					if (userFlag.list[i].checked) {
						userFlag.text += userFlag.list[i].title + ' '
					}
				}

				console.log("onConfirmCheckBox", that.curChexkBoxList, this.selectCheckBoxList, userFlag)
				that.isShowPopupChexkBox = false;
			},
			onDeleteFollowLog(item) {
				let that = this
				uni.showModal({
					title: "提示",
					content: "确定要删除该跟进记录吗？",
					success: function (res) {
						if (res.confirm) {
							console.log("用户点击确定");
							api.deleteFollowLog({
								interfaceName: item.id,
								param: {}
							}).then(res => {
								console.log(res)
								if (res.success) {
									that.clearListShow(that.followLogPageObj)
									that.getFollowLogList()
								}
							})
						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					},
				});
				
				
			},
			onPreviewImages(images, index) {
				console.log("onPreviewImages")
				var imageList = [];
				for (var i in images) {
					imageList[i] = images[i].filePath
				}

				uni.previewImage({
					current: index,
					urls: imageList,
				})
			},
			onShowSharePath(sharePathList) {
				console.log("sharePathList:", sharePathList)
				that.sharePathList.splice(0, that.sharePathList.length)
				for (var i = 0; i < sharePathList.length; i++) {
					that.sharePathList.push(sharePathList[i])
				}
				that.showBottomPopup = true;
			},

			onChangeUtabs(item) {
				var index = item.index
				if (this.currentUtabs != index) {
					this.currentUtabs = index;
					index
					that.clearListShow(that.customerLogPageObj)
					that.clearListShow(that.followLogPageObj)
					if (this.listUtabs[this.currentUtabs].id == 0) {
						that.getOneCustomerLogList();
					} else if (this.listUtabs[this.currentUtabs].id == 1) {
						that.getFollowLogList();
					} else if (this.listUtabs[this.currentUtabs].id == 2) {
						that.getCustomerAnalysisData(0);
					} else if (this.listUtabs[this.currentUtabs].id == 3) {
						that.getUserProps();
					}
					this.currrentCustomerTabs = 0;
				}
			},
			onChangeCustomerTabs(item) {
				var index = item.index
				if (this.currrentCustomerTabs != index) {
					this.currrentCustomerTabs = index;
					that.getCustomerAnalysisData(index);
				}
			},

			onChangeIntent() {
				this.isShowIntent = true
			},
			onPickerConfirm(e) {
				console.log("onPickerConfirm", e)
				that.customerInfo.intention = e.indexs[0];
				that.updateCustomerIntention(that.customerInfo.intention);
				that.isShowIntent = false
			},


			gotoPhone(item) {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: that.customerInfo.phone,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			gotoAddFollowLog() {
				uni.navigateTo({
					url: './addFollowLog?id=' + that.customerId
				})
			},


			getOneCustomerLogList() {
				let that = this
				if (that.customerLogPageObj.curPageIndex != that.customerLogPageObj.pageIndex) {
					that.customerLogPageObj.curPageIndex = that.customerLogPageObj.pageIndex
					uni.showLoading({
						title: "加载中...",
					})
					api.getOneCustomerLogList({
						interfaceName: that.customerId,
						param: {
							limit: 20,
							page: that.customerLogPageObj.pageIndex,
						}
					}).then(res => {
						console.log("getOneCustomerLogList:", res)
						if (res.code == 0) {
							that.pushListShow(that.customerLogPageObj, res.data)
						}
					}).finally(t=>{
						uni.hideLoading()
					})
				}
			},

			getFollowLogList() {
				let that = this
				api.getFollowLogList({
					interfaceName: that.customerId,
					param: {}
				}).then(res => {
					console.log(res)
					if (res.success) {
						that.pushListShow(that.followLogPageObj, res.data)
					}
				})
			},

			getCustomerDetail() {
				let that = this
				api.getCustomerDetail({
					interfaceName: that.customerId,
					param: {}
				}).then(res => {
					console.log(res)
					if (res.success) {
						res.data.intention = res.data.intention || 0
						res.data.phone = res.data.phone || ''
						that.customerInfo = res.data;
					}
				})
			},

			updateCustomerIntention(id) {
				let that = this
				api.updateCustomerIntention({
					interfaceName: that.customerId + '/' + id,
				}).then(res => {
					console.log(res)
					if (res.success) {
						// that.customerInfo = res.data;
					}
				})
			},

			updateCustomerName(type) {
				if (type == 0) {
					that.isEditName = true;
				} else {

					api.updateCustomerName({
						param: {
							id: that.customerId,
							name: that.customerInfo.name,
						}
					}).then(res => {
						console.log(res)
						if (res.success) {
							uni.showToast({
								title: '保存成功！'
							})
							that.isEditName = false;
						} else {
							uni.showToast({
								title: '保存失败！'
							})
						}
					}).catch(() => {
						uni.showToast({
							title: '保存失败！'
						})
					})
				}
			},

			getCustomerAnalysisData(index) {
				api.getCustomerAnalysisData({
					interfaceName: that.customerId,
					param: {
						sortBy: index
					}
				}).then(res => {
					console.log(res)
					if (res.success) {
						var firstVisitTime = ''
						var lastVisitTime = ''

						if (res.data.firstVisitTime) {
							firstVisitTime = utils.formatTime(res.data.firstVisitTime, "yyyy年MM月dd日") + ' ';
							firstVisitTime += utils.formatTime(res.data.firstVisitTime, "hh-mm-ss");
						}
						if (res.data.lastVisitTime) {
							lastVisitTime = utils.formatTime(res.data.lastVisitTime, "yyyy年MM月dd日") + ' ';
							lastVisitTime += utils.formatTime(res.data.lastVisitTime, "hh-mm-ss");
						}
						res.data.firstVisitTime = firstVisitTime;
						res.data.lastVisitTime = lastVisitTime;

						that.analysisDataObj = res.data
					}
				})
			},


			getUserProps() {
				api.getUserProps({
					param: {
						id: that.customerId,
					}
				}).then(res => {
					console.log(res)
					if (res.success) {
						for (var i in that.userFlagList) {
							var item = that.userFlagList[i];
							var key = item.key
							var selectList = res.data[key]
							if (res.data.hasOwnProperty(key)) {
								item.show = true
							}
							var userProp = res.data.userProps[key]

							item.text = ''
							//===选项列表
							if (selectList && (item.type == 'checkbox' || item.type == "picker")) {
								item.list.splice(0, item.list.length)
								item.pickerList.splice(0, item.pickerList.length)
								for (var j in selectList) {
									var obj = selectList[j];
									//----设置是否选择
									obj.checked = false;
									for (var k in userProp) {
										if (obj.code == userProp[k]) {
											obj.checked = true;
											item.text += obj.title + ' '
										}
									}
									item.list.push(obj);
									item.pickerList.push(obj.title)
								}
							}

							if (item.type == 'input') {
								item.text = userProp || '';
							}
						}
					}
				})
			},

			onSaveCustomInfo() {
				that.updateUserProps();
			},
			filterEnable(list) {
				var tlist = []
				for (var i in list) {
					if (list[i].checked) {
						tlist.push(list[i].code)
					}
				}
				return tlist;
			},
			updateUserProps() {
				var postParams = {};
				for (var i in that.userFlagList) {
					if (that.userFlagList[i].show) {
						var val;
						if (that.userFlagList[i].list && that.userFlagList[i].list.length > 0) {
							val = that.filterEnable(that.userFlagList[i].list);
						} else {
							val = that.userFlagList[i].text;
						}
						postParams[that.userFlagList[i].key] = val;
					}
				}

				api.updateUserProps({

					param: {
						...postParams,
						id: that.customerId,

					}
				}).then(res => {
					console.log(res)
					if (res.success) {
						uni.showModal({
							title: '提示',
							content: '顾客资料保存成功~',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
						})
					}
				})
			},





			/**
			 * @description: 列表中添加数据
			 * @param {number} id   u-tabs-swiper的当前ID
			 * @param {list}  列表
			 * @return void
			 */
			pushListShow(srcObj, pushlist) {
				if (pushlist && pushlist.length > 0) {
					for (let i = 0; i < pushlist.length; i++) {

						if (pushlist[i].createTime) {
							pushlist[i].day = utils.formatTime(pushlist[i].createTime, "yyyy年MM月dd日");
							pushlist[i].time = utils.formatTime(pushlist[i].createTime, "hh-mm");
						}
						if (pushlist[i].staySeconds >= 3) {
							if (pushlist[i].staySeconds >= 1000) {
								pushlist[i].stayTime = parseInt(pushlist[i].staySeconds / 60) + "分钟"
							} else {
								pushlist[i].stayTime = pushlist[i].staySeconds + '秒'
							}
						} else {
							pushlist[i].stayTime = '小于3秒'
						}

						srcObj.list.push(pushlist[i])
					}
					srcObj.pageIndex++;

					if (pushlist.length == 10) {
						srcObj.loadStatus = "loadmore"
					} else {
						srcObj.loadStatus = "nomore"
					}
				} else {
					srcObj.loadStatus = "nomore"
				}
				console.log(srcObj)
			},

			//----清空列表
			clearListShow(srcObj) {
				srcObj.curPageIndex = 0;
				srcObj.pageIndex = 1;
				srcObj.list.splice(0, srcObj.list.length)
			},
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #F3F3F3;
	}

	.headerContainer {
		width: 714rpx;
		// height: 244rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
		border-radius: 20rpx;
		margin-top: 32rpx;
		padding: 40rpx 30rpx;

		.wrapper {
			display: flex;
			align-items: center;

			.left {
				margin-right: 24rpx;
				position: relative;
				width: 128rpx;
				height: 150rpx;

				.avatar {
					margin-left: 4rpx;
					width: 120rpx;
					height: 120rpx;
					// margin-bottom: 28rpx;
					border-radius: 20rpx;
					background-color: #F3F3F3;
				}

				.tag {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 128rpx;
					height: 44rpx;
					background-color: #44b7ff;
					border-radius: 10rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 44rpx;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;

					.icon {
						width: 18rpx;
						height: 18rpx;
						// margin-left: 5rpx;
					}
				}
			}

			.middle {
				margin-right: 30rpx;
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
				width: 500rpx;

				.name {
					height: 40rpx;
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;

					.input {
						// min-width: 100rpx;
						width: 350rpx;
					}

					.icon {
						width: 35rpx;
						height: 35rpx;
						margin-left: 15rpx;
					}

					.introEdit {
						border: solid 1rpx #32b0ff;
					}
				}

				.nickName {
					height: 40rpx;
					margin-bottom: 20rpx;
				}

				.phone {
					display: flex;
					align-items: center;
					height: 40rpx;

					.icon {
						width: 30rpx;
						height: 30rpx;
						margin-left: 10rpx;
					}
				}
			}
		}


		.bntWrapper {
			display: flex;
			margin-top: 40rpx;
			width: 100%;
			justify-content: left;
			flex-direction: row-reverse;

			.leftBtn {
				width: 270rpx;
				height: 80rpx;
				background-color: #ffffff;
				border-radius: 40rpx;
				border: solid 2rpx #16a5fe;
				font-size: 32rpx;
				color: #16a5fe;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 54rpx;

				.icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}
			}

			.rightBtn {
				width: 270rpx;
				height: 80rpx;
				background-color: #16a5fe;
				border-radius: 40rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;

				.icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}
			}
		}

	}

	.tabsHeaderContianer {
		width: 714rpx;
		margin-top: 24rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 10rpx;
	}

	.tabsContianer {
		width: 714rpx;
		background: #FFFFFF;
		border-radius: 0 0 20rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 40rpx;
	}

	.secondTabsContianer {
		border-radius: 20rpx;
		margin-top: 20rpx;
	}


	.customerLogDay {
		width: 630rpx;
		font-size: 28rpx;
		color: #333;
		line-height: 40rpx;
		margin-top: 40rpx;
		font-weight: 600;
	}

	.customerLogItem {
		width: 630rpx;
		font-size: 24rpx;
		color: #666666;
		line-height: 33rpx;
		margin-top: 32rpx;
		display: flex;
		justify-content: space-between;

		.wrapper {
			margin-left: 10rpx;
			display: flex;

			// align-items: center;
			.time {
				margin-right: 25rpx;
			}

			.content {
				width: 400rpx;
			}
		}

		.staytime {
			margin-left: 15rpx;
			color: #16a5fe;
		}
	}

	.customerLogAvatar {
		width: 618rpx;
		// height: 60rpx;
		background: #F7F8FA;
		border-radius: 6rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 24rpx;

		.left {
			display: flex;
			align-items: center;
			margin-left: 24rpx;
			width: 450rpx;
			flex-wrap: wrap;

			.avatar {
				// padding-top: 8rpx;
				// padding-bottom: 8rpx;
				width: 44rpx;
				height: 44rpx;
				margin-right: 8rpx;
				border-radius: 50%;
			}

			.arrow {
				width: 26rpx;
				height: 26rpx;
				margin-right: 8rpx;
			}
		}

		.right {
			padding: 17rpx 0;
			width: 26rpx;
			height: 26rpx;
			margin-right: 24rpx;
		}
	}

	.followLogContainer {
		width: 588rpx;
		position: relative;

		.day {
			font-size: 24rpx;
			color: #666666;
			line-height: 33rpx;
			margin-top: 36rpx;
		}

		.content {
			width: 100%;
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			margin-top: 24rpx;

			.type {
				font-weight: bold;
				margin-right: 10rpx;
			}
		}

		.bottomWrapper {
			display: flex;
			width: 100%;
			margin-top: 32rpx;
			flex-wrap: wrap;

			.img {
				width: 180rpx;
				height: 180rpx;
				margin-right: 15rpx;
				margin-bottom: 15rpx;
			}
		}

		.tag {
			position: absolute;
			right: -50rpx;
			bottom: 10rpx;
			width: 50rpx;
			height: 50rpx;
			padding: 10rpx;
			background-color: #bbb;
			border-radius: 10rpx;
		}
	}


	.bottomContainer {
		width: 750rpx;
		height: 150rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;

		.container {
			width: 600rpx;
			height: 80rpx;
			background: #5E9FFD;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}

	.analysisContainer {
		width: 650rpx;

		.item {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 32rpx;

			.left {
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
			}

			.right {
				max-width: 350rpx;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				white-space: pre-wrap;
				word-wrap: break-word;
			}
		}

	}

	.rankListContainer {
		width: 714rpx;
		// height: 514rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-top: 24rpx;
		padding-bottom: 30rpx;

		.title {
			width: 650rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 32rpx;
			margin-bottom: 32rpx;

			.text {
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}

			.btn {
				width: 100rpx;
				height: 56rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				line-height: 56rpx;
				text-align: center;
			}

			.btnEn {
				color: #FFFFFF;
				background: #5E9FFD;
			}

			.btnDis {
				color: #999999;
				background: #F3F1F3;
			}
		}

		.tableBox {
			.item {
				display: flex;
				height: 59rpx;
				text-align: center;
				line-height: 59rpx;
				font-size: 28rpx;
				color: #666666;

				.left {
					border-left: #e3e3e3 solid 1px;
					border-top: #e3e3e3 solid 1px;
					height: 100%;
					width: 111rpx;
				}

				.middle {
					border-left: #e3e3e3 solid 1px;
					border-top: #e3e3e3 solid 1px;
					height: 100%;
					width: 267rpx;
				}

				.right {
					border-left: #e3e3e3 solid 1px;
					border-top: #e3e3e3 solid 1px;
					border-right: #e3e3e3 solid 1px;
					height: 100%;
					width: 212rpx;
				}
			}

			.endLine {
				width: 100%;
				height: 1px;
				background-color: #e3e3e3;
			}
		}

	}


	.popupContainer {
		min-height: 300rpx;

		.close {
			width: 750rpx;
			height: 86rpx;
			background-color: rgba(255, 255, 255, 0);

			.icon {
				width: 56rpx;
				width: 56rpx;
				margin-left: 664rpx;
			}
		}

		.wrapper {
			font-size: 32rpx;
			// height: 64rpx;
			width: 750rpx;
			line-height: 64rpx;
			text-align: center;
			display: flex;
			align-items: center;
			font-size: 32rpx;

			.icon {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				margin-left: 48rpx;
				background-color: #F3F3F3;
			}

			.name {
				font-size: 26rpx;
				line-height: 36rpx;
				width: 250rpx;
			}

			.right {
				margin-left: 20rpx;
				font-size: 28rpx;
			}
		}

		.arrow {
			width: 26rpx;
			height: 26rpx;
			margin: 17rpx 0 17rpx 67rpx;
		}
	}

	.userFlagContainer {
		width: 100%;
		padding-top: 30rpx;

		.item {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #F3F3F3;

			.left {
				margin-left: 30rpx;
				height: 40rpx;
				width: 130rpx;
				font-size: 28rpx;
				color: #3D3D3D;
				line-height: 40rpx;
				margin-right: 40rpx;
			}

			.middle {
				min-height: 40rpx;
				width: 420rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				color: #333333;
				// word-wrap:break-word;
			}

			.right {
				margin-left: 30rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.userInfoPopup {
		padding: 30rpx 60rpx;
		width: 600rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		
		.text {
			width: 100%;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			color: #000000;
			font-weight: bold;
			font-size: 30rpx;
			margin-bottom: 40rpx;
		}

		.bottom {
			width: 100%;
			font-size: 28rpx;
			text-align: center;
			line-height: 64rpx;
			display: flex;
			margin-top: 40rpx;
			justify-content: space-around;

			.left {
				width: 152rpx;
				height: 64rpx;
				border-radius: 37rpx;
				border: 1rpx solid #979797;
				color: #666666;
			}

			.right {
				color: #FFFFFF;
				width: 152rpx;
				height: 64rpx;
				background: #5E9FFD;
				border-radius: 37rpx;
			}
		}
	}
</style>